
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>futurecoder：从零开始学习 Python</title>
    <link href="https://fonts.googleapis.com/css?family=Heebo:400,400i,500,700|Titillium+Web:600" rel="stylesheet">
    <link rel="stylesheet" href="static/css/brochure/style.css"/>
    <link rel="stylesheet" href="static/css/home.css"/>
    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
    <link rel="shortcut icon" type="image/png" href="static/logo/favicon_32px.png"/>
    <meta property="og:title" content="futurecoder：从零开始学习编程"/>
    <meta property="og:type" content="website"/>
    <meta property="og:description" content="100% 免费且互动的 Python 初学者课程"/>
    <meta property="og:image" content="https://futurecoder.io/static/logo/bordered.png"/>
</head>
<body onload="AOS.init({once:true})">
<div class="body-wrap boxed-container home-page">
    <div style="position:fixed; z-index:0; top:0; left:0; width:100%; height:100%;">
        <canvas id="canvas" style="width:100%; height:100%;"></canvas>
    </div>

    <header class="site-header">
        <div class="container">
            <div class="site-header-inner">
                <div class="brand header-brand float-left">
                    <img id="logo" src="static/logo/bordered.png" data-aos="fade-right" data-aos-delay="0">
                </div>
                <div class="navbar float-right" data-aos="fade" data-aos-duration="1000" data-aos-delay="1000">
                    <a href="http://futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> English
                    </a>
                    <a href="http://es.futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> Español
                    </a>
                    <a href="http://fr.futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> Français
                    </a>
                    <a href="http://pl.futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> Polski
                    </a>
                    <a href="http://ta.futurecoder.io">
                        <img class="translation-icon" src="static/img/icons/language.png"/> தமிழ்
                    </a>
<!--                    <a href="http://zh.futurecoder.io">-->
<!--                        <img class="translation-icon" src="static/img/icons/language.png"/> 中文-->
<!--                    </a>-->
                    <a href="https://github.com/alexmojaki/futurecoder">
                        <i class="fab fa-github"></i> Github
                    </a>
                </div>
            </div>
        </div>
    </header>
    <main>
        <section class="hero">
            <div class="container center-content">
                <div class="hero-inner">
                    <div>
                        <h1 class="hero-title mt-0 is-revealing" data-aos="fade-right" data-aos-delay="100">
                            futurecoder
                        </h1>
                        <h3 class="hero-paragraph is-revealing" data-aos="fade-right" data-aos-delay="200">
                            从零开始学习 Python。
                        </h3>


                        <div class="bullets-inner section-inner">
                            <div class="bullets-wrap">
                                <div class="bullet" data-aos="fade-up" data-aos-delay="500" data-aos-offset="-200px">
                                    <div class="bullet-inner">
                                        <div class="bullet-header mb-16">
                                            <div class="bullet-icon mr-16">
                                                <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
                                                    <g fill="none" fill-rule="nonzero">
                                                        <path d="M16 9c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4z" fill="#4353FF"/>
                                                        <path d="M27 9c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4z" fill="#43F1FF"/>
                                                        <path d="M27 12c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z" fill="#4353FF"/>
                                                        <path d="M5 23c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z" fill="#43F1FF"/>
                                                        <path d="M27 23c-1.859 0-3.41 1.28-3.858 3h-3.284A3.994 3.994 0 0 0 17 23.142v-3.284c1.72-.447 3-2 3-3.858 0-2.206-1.794-4-4-4-1.859 0-3.41 1.28-3.858 3H8.858A3.994 3.994 0 0 0 6 12.142V8.858c1.72-.447 3-2 3-3.858 0-2.206-1.794-4-4-4S1 2.794 1 5c0 1.858 1.28 3.41 3 3.858v3.284c-1.72.447-3 2-3 3.858 0 2.206 1.794 4 4 4 1.859 0 3.41-1.28 3.858-3h3.284A3.994 3.994 0 0 0 15 19.858v3.284c-1.72.447-3 2-3 3.858 0 2.206 1.794 4 4 4 1.859 0 3.41-1.28 3.858-3h3.284c.447 1.72 2 3 3.858 3 2.206 0 4-1.794 4-4s-1.794-4-4-4z" fill="#4353FF"/>
                                                    </g>
                                                </svg>
                                            </div>
                                            <h4 class="bullet-title m-0">重新定义互动学习</h4>
                                        </div>
                                        <!--p class="text-sm mb-0">...</p-->
                                    </div>
                                </div>
                                <div class="bullet" data-aos="fade-up" data-aos-delay="600" data-aos-offset="-200px">
                                    <div class="bullet-inner">
                                        <div class="bullet-header mb-16">
                                            <div class="bullet-icon mr-16">
                                                <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
                                                    <g fill-rule="nonzero" fill="none">
                                                        <path d="M7 8H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zM19 8h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#4353FF"/>
                                                        <path d="M19 20h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#43F1FF"/>
                                                        <path d="M31 8h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#4353FF"/>
                                                        <path d="M7 20H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#43F1FF"/>
                                                        <path d="M7 32H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1z" fill="#4353FF"/>
                                                        <path d="M29.5 18h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5z" fill="#43F1FF"/>
                                                        <path d="M17.5 30h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5zM29.5 30h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5z" fill="#4353FF"/>
                                                    </g>
                                                </svg>
                                            </div>
                                            <h4 class="bullet-title m-0">100% 免费且开源</h4>
                                        </div>
                                        <!--p class="text-sm mb-0">...</p-->
                                    </div>
                                </div>
                                <div class="bullet" data-aos="fade-up" data-aos-delay="700" data-aos-offset="-200px">
                                    <div class="bullet-inner">
                                        <div class="bullet-header mb-16">
                                            <div class="bullet-icon mr-16">
                                                <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
                                                    <g fill-rule="nonzero" fill="none">
                                                        <path d="M4 12H0V5a5.006 5.006 0 0 1 5-5h7v4H5a1 1 0 0 0-1 1v7z" fill="#43F1FF"/>
                                                        <path d="M32 12h-4V5a1 1 0 0 0-1-1h-7V0h7a5.006 5.006 0 0 1 5 5v7zM12 32H5a5.006 5.006 0 0 1-5-5v-7h4v7a1 1 0 0 0 1 1h7v4z" fill="#4353FF"/>
                                                        <path d="M27 32h-7v-4h7a1 1 0 0 0 1-1v-7h4v7a5.006 5.006 0 0 1-5 5z" fill="#43F1FF"/>
                                                    </g>
                                                </svg>
                                            </div>
                                            <h4 class="bullet-title m-0">为初学者精心设计</h4>
                                        </div>
                                        <!--p class="text-sm mb-0">...</p-->
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div data-aos="fade-in" data-aos-delay="1000" data-aos-offset="-600px">
                            <div>
                                <a class="button button-primary button-complimentary-color button-block big" href="/course/">
                                    <i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i> 开始学习
                                </a>

                                <span style="margin: 0 1em">或</span>

                                <a class="button button-primary button-block big" href="/course/#ide">
                                    <i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i> 只是编码
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="hero-illustration">
                        <div id="hero-image" class="is-moving-object is-rotating">
                            <img width="640" height="540" src="static/img/terminal.png">
                        </div>
                    </div>
                </div>
            </div>

            <div class="spacer"></div>
            <div class="spacer"></div>
            <div class="spacer"></div>

            <div class="container flex" style="justify-content: center" data-aos="fade-down" data-aos-duration="1800" data-aos-delay="1200" data-aos-offset="-800px">
                <div id="scroll-animation">
                    <a href="#header-end-anchor"><span></span></a>
                </div>
            </div>
            <div id="header-end-anchor"></div>

        </section>


        <section id="testimonials">
            <div class="container" data-aos="fade-up" data-aos-duration="800" data-aos-offset="200">
                <h1 class="center-text">听听别人怎么说</h1>
                <div class="badges">
                    <div class="badge">
                        <a href="https://www.reddit.com/r/learnprogramming/comments/qjs3wh/i_built_futurecoder_a_100_free_and_interactive/">
                            <div class="center-text">
                                <i class="fab fa-reddit-alien"></i>
                                r/LearnProgramming
                            </div>
                            <div class="flex">
                                <span><i class="fa fa-arrow-up"></i> 1786</span>
                                <span><i class="fa fa-medal"></i> 36</span>
                                <span><i class="fa fa-comments"></i> 118</span>
                            </div>
                        </a>
                    </div>
                    <div class="badge">
                        <a href="https://www.reddit.com/r/InternetIsBeautiful/comments/qo0j20/i_built_futurecoder_a_100_free_and_interactive/">
                            <div class="center-text">
                                <i class="fab fa-reddit-alien"></i>
                                r/InternetIsBeautiful
                            </div>
                            <div class="flex">
                                <span><i class="fa fa-arrow-up"></i> 560</span>
                                <span><i class="fa fa-medal"></i> 6</span>
                                <span><i class="fa fa-comments"></i> 37</span>
                            </div>
                        </a>
                    </div>
                    <div class="badge">
                        <a href="https://github.com/alexmojaki/futurecoder">
                            <div class="center-text">
                                <i class="fab fa-github"></i>
                                GitHub
                            </div>
                            <div class="flex">
                                <span><i class="fa fa-star"></i> 1300+</span>
                            </div>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://github.com/alexmojaki/futurecoder/issues/164">
                            我用过 w3schools 和其他应用，但
                            <strong>
                                这是目前我能找到的最好的互动应用
                            </strong>
                            。非常感谢你制作了它。
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/Python/comments/pieyuu/i_built_futurecoder_a_free_interactive_python/hefgowx">
                            <strong>这太棒了！我喜欢它！</strong>
                            原来可以是这样
                            <strong>一种如此简单的学习方式</strong>
                            ，我几乎为没有早一点遇到它而感到沮丧。
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.youtube.com/watch?v=un1BrrV57PA&lc=UgxTuVzf0xK0RuqLgeZ4AaABAg">
                            Futurecoder 是
                            <strong>我遇到过的最好的互动（或非互动）编程教程</strong>
                            。节奏很好，UI/UX 完美。
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/learnprogramming/comments/rmv603/im_a_senior_c_software_developer_and_i_want_to/hprxyn6/">
                            <strong>我比 Codecademy 更喜欢这个</strong>。
                            在做练习时，你 99% 都在主动学习。
                            <strong>更多的课程需要以这种方式教学！我爱它！</strong>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/InternetIsBeautiful/comments/qo0j20/comment/hjlwk1c/">
                            惊人的资源。
                            这做得非常好。
                            <strong>很多课程都可以使用这种处理方式。</strong>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/learnpython/comments/1ekfb0c/futurecoderio_continued_learning/">
                            <strong>毫无疑问，这是我有过的最好的学习体验。</strong>
                            使用鼓励的、朴实的语言和没有填鸭式的教学方式完全适合我。
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/learnpython/comments/1ekfb0c/futurecoderio_continued_learning/ll3wan5/">
                            <strong>这是帮助我更好地思考的最好工具。</strong>
                            我一直在饥渴地学习着内容。
                            <strong>当别人无法吸引我的注意力时，我发现它如此有趣。</strong>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/learnpython/comments/xqxovo/what_is_the_best_free_python_course/iqcfws8/">
                            它的目的是
                            <strong>尽可能简单和快速</strong>。
                            我在一周内学会了 Python 的基础知识。
                            <strong>我将我现在的水平归功于这个网站。</strong>
                        </a>
                    </div>
                    <div class="badge testimonial">
                        <a href="https://www.reddit.com/r/InternetIsBeautiful/comments/qo0j20/comment/hk0mfcq/">
                            老实说，我从来没有对编码感兴趣，但你的课程
                            <strong>真的很容易使用</strong>
                            ，所以我每天都在学习编程。
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section id="features">
            <div class="container">
                <div data-aos="fade-up" data-aos-duration="800" data-aos-offset="200">
                    <h1 class="center-text">来看下实际的体验吧！</h1>
                </div>
                <div class="spacer"></div>

                <div>
                    <div class="feature flex">
                        <div class="feature-image" data-aos="fade-left" data-aos-duration="800">
                            <img src="static/img/features/layout.png">
                        </div>
                        <div class="feature-text" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <div class="feature-line"></div>
                                <h3>完全互动</h3>
                            </div>
                            <p>
                                用户必须在提供的编辑器或 shell 中运行代码并回答问题以推进。
                            </p>
                        </div>
                    </div>

                    <div class="feature flex">
                        <div class="feature-text" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <h3>轻松调试</h3>
                                <div class="feature-line">
                                </div>
                            </div>
                            <p>
                                只需单击一下，用户就可以运行强大的调试器来可视化执行并找到问题。
                                有三个调试器，每个都有自己的优势：
                                <a href="http://pythontutor.com/">Python Tutor</a>，<a href="https://github.com/alexmojaki/snoop">Snoop</a>，和
                                <a href="https://github.com/alexmojaki/birdseye">Bird's Eye</a>（如图）。
                            </p>
                        </div>
                        <div class="feature-image" data-aos="fade-right" data-aos-duration="800">
                            <img src="static/img/features/birdseye.png">
                        </div>
                    </div>

                    <div class="feature flex">
                        <div class="feature-image" data-aos="fade-left" data-aos-duration="800">
                            <img src="static/img/features/traceback.png">
                        </div>
                        <div class="feature-text" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <div class="feature-line"></div>
                                <h3>增强的错误消息</h3>
                            </div>
                            <p>
                                正常的 Python 回溯对初学者来说很吓人。
                                futurecoder 消除了恐惧并使它们变得有用。
                            </p>
                        </div>
                    </div>

                    <div class="feature flex">
                        <div class="feature-text" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <h3>帕森斯问题</h3>
                                <div class="feature-line"></div>
                            </div>
                            <p>
                                如果学生在尝试解决练习时卡住，并且他们已经用尽了所有提示，
                                他们可以尝试将打乱的解决方案按正确顺序排列。
                                这确保他们仍然运用思维，同时减少挫败感。
                            </p>
                        </div>
                        <div class="feature-image" data-aos="fade-right" data-aos-duration="800">
                            <img src="static/img/features/parsons.png">
                        </div>
                    </div>

                    <div class="feature flex">
                        <div class="feature-image" data-aos="fade-left" data-aos-duration="800">
                            <img src="static/img/features/solution.png">
                        </div>
                        <div class="feature-text" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">
                            <div class="feature-header">
                                <div class="feature-line"></div>
                                <h3>解决方案路径导航</h3>
                            </div>
                            <p>
                                作为最后手段，学生可以逐渐揭示解决方案，直到他们有足够的信息来自己填写剩余的空白。
                            </p>
                        </div>
                    </div>

                    <h4 class="center-text" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
                        这只是功能的冰山一角。
                        <br>更多信息，请<a href="#demo-vid">观看下面的视频</a> 或
                        <a href="/course/">立即开始！</a>
                    </h4>
                </div>

            </div>
        </section>

        <section id="demo-vid" data-aos="fade-up" data-aos-duration="800" data-aos-offset="300">
            <div class="container flex center-content">
                <div>
                    <h2>观看功能和好处的演示：</h2>
                    <!-- https://stackoverflow.com/a/20130011/2482744 -->
                    <div style="position: relative; padding-top: 56.25%">
                        <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
                                src="https://www.youtube.com/embed/un1BrrV57PA"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen
                        ></iframe>
                    </div>
                </div>
            </div>
        </section>

        <section id="email-newsletter" data-aos="fade-up" data-aos-duration="800" data-aos-offset="300">
            <div class="container flex">
                <div class="col">
                    <h2 class="marginless text-right">想接收 futurecoder 的更新吗？</h2>
                </div>
                <div class="col">
                    <input id="email-input" type="email" placeholder="电子邮件">
                    <button class="button button-primary button-block" onclick="submitEmail()">
                        提交
                    </button>
                    <div id="email-success"
                         style="display: none; margin-top: 0.5em; font-weight: bold; color: #76ff76"
                    >
                        <i class="far fa-check-circle"></i>
                        已保存！
                    </div>
                </div>
            </div>
        </section>

        <section id="about">
            <div class="container flex" data-aos="fade-up" data-aos-delay="100" data-aos-duration="800" data-aos-offset="50">
                <div class="col">
                    <img class="floating-anim-6" id="about-logo" src="static/logo/bordered.png">
                </div>
                <div class="col">
                    <h2 class="marginless">关于</h2>
                    <p>
                        <b>futurecoder 是一个免费开源平台和课程，供完全初学者自学 Python 编程。</b>
                    </p>
                    <h5>futurecoder 的长期目标雄心勃勃：</h5>
                    <ul>
                        <li>革新计算机教育。我们相信学编程平台可以做得更好。</li>
                        <li>制作最好的学习资源，让每个人都可以贡献和改进</li>
                        <li>允许任何人独立学习编程，无论背景或天赋如何</li>
                    </ul>
                    <h5>我们计划通过以下方式实现这些目标：</h5>
                    <ul>
                        <li>让学生在学习编写真实代码时保持参与和兴趣</li>
                        <li>提供易于使用的强大工具以防止挫败感</li>
                        <li>教授 Python，一个被广泛认为应是第一个学习的语言
                            以及真实应用中最受欢迎的语言。</li>
                        <li>使用开源代码库持续迭代</li>
                    </ul>
                </div>
            </div>
        </section>

        <section id="contribute" data-aos="fade-up" data-aos-duration="800">
            <div class="container flex">
                <div class="col">
                    <p class="text-right">
                        这是一个永无止境的项目。
                        要使这个网站更大更好，还有很多工作要做。
                        需要各种帮助，我们会非常感激！
                    </p>
                </div>
                <div class="col">
                    <img class="tech-stack-icon floating-anim-5" src="static/img/icons/python.png">
                    <img class="tech-stack-icon floating-anim-7" src="static/img/icons/react.png">
                    <h3 class="marginless">有兴趣贡献代码或课程内容吗？</h3>
                    <br>
                    <a href="https://github.com/alexmojaki/futurecoder/blob/master/how_to_contribute.md" class="button button-primary button-block">
                        <i class="fab fa-github"></i>&nbsp&nbsp 查看 GitHub 上的贡献指南
                    </a>
                </div>
            </div>

            <div class="spacer"></div>
            <div class="spacer"></div>

            <div class="container flex">
                <div class="col">
                </div>
                <div class="col">
                    <h3>联系我们</h3>
                    <p>
                        <i class="fab fa-discord"></i>&nbsp&nbsp
                        <a href="https://discord.gg/KwWvQCPBjW">
                            在 Discord 上聊天
                        </a>
                    </p>
                    <p>
                        <i class="fab fa-github"></i>&nbsp&nbsp
                        <a href="https://github.com/alexmojaki/futurecoder/issues/new">
                            在 GitHub 上打开问题
                        </a>
                    </p>
                    <p>
                    <p>
                    <i class="fas fa-envelope"></i>&nbsp&nbsp
                        <a href="mailto:hello@futurecoder.io">
                            hello@futurecoder.io
                        </a>
                    </p>
                </div>
            </div>
        </section>


    </main>

    <footer class="site-footer">
        <div class="footer-dots is-moving-object is-translating" data-translating-factor="160">
            <!-- todo -->
            <!--svg width="69" height="91" xmlns="http://www.w3.org/2000/svg">
                <g fill="#43F1FF" fill-rule="evenodd">
                    <path d="M37.105 41.007l-2.9 1.334-.786 2.823.926 2.689 2.76 1.154 2.6-1.31 1.714-2.533-1.296-2.94z"/>
                    <path fill-opacity=".64" d="M63.109 27.24l-1.45.666-.394 1.412.464 1.344 1.38.577 1.3-.655.856-1.266-.647-1.47z"/>
                    <path fill-opacity=".24" d="M66.226 86.638l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47z"/>
                    <path fill-opacity=".64" d="M13.497 43.713l-2.175 1-.59 2.118.695 2.016 2.07.866 1.95-.983 1.285-1.9-.972-2.204z"/>
                    <path fill-opacity=".8" d="M59.076 56.658l-2.175 1-.59 2.117.695 2.017 2.07.866 1.949-.983 1.286-1.9-.972-2.204z"/>
                    <path fill-opacity=".48" d="M22.262 18.49l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47z"/>
                    <path fill-opacity=".64" d="M23.422 .5l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47z"/>
                    <path fill-opacity=".48" d="M2.637 12.5l-1.45.667-.393 1.412.463 1.344 1.38.577 1.3-.655.857-1.266-.648-1.47zM36.563 10.856l-.725.334-.197.706.232.672.69.288.65-.327.428-.633-.324-.735z"/>
                </g>
            </svg -->
        </div>
        <div class="container flex">
            <div class="site-footer-inner has-top-divider">
                <div class="footer-copyright">
                    &copy; 2025 Alex Hall
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://www.flaticon.com/free-icons/language" title="language icons">语言图标由 Freepik - Flaticon 提供</a>
                </div>
                <!--ul class="footer-social-links list-reset">
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Facebook</span>
                            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z" fill="#FFFFFF"/>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Twitter</span>
                            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z" fill="#FFFFFF"/>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Google</span>
                            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z" fill="#FFFFFF"/>
                            </svg>
                        </a>
                    </li>
                </ul-->
            </div>
        </div>
    </footer>
</div>

<script src="static/js/main.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script type="text/javascript" src="static/js/warpspeed.min.js"></script>
<script>
    new WarpSpeed(
        "canvas", {
            "speed": 2,
            "speedAdjFactor": 0,
            "density": 1.5,
            "shape": "square",
            "warpEffect": true,
            "warpEffectLength": 10,
            "depthFade": true,
            "starSize": 3,
            "backgroundColor": "hsl(263,45%,7%)",
            "starColor": "#eee"
        }
    );
</script>
</body>
</html> 
